<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="searchForm" :model="searchForm" :inline="true" @keyup.enter.native="search()">
        <el-form-item label="ID" prop="id">
          <el-input v-model="searchForm.id" type="text" placeholder="ID" maxlength="10" clearable />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="searchForm.name" type="text" placeholder="姓名" maxlength="10" clearable />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="searchForm.remark" type="text" placeholder="描述" maxlength="20" clearable />
        </el-form-item>
        <el-form-item label="薪水" prop="salary">
          <el-input v-model="searchForm.salary" type="text" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="searchForm.birthdayRange"
            type="daterange"
            format="yyyyMMdd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyyMMdd"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="createtime">
          <el-date-picker
            v-model="searchForm.createtimeRange"
            type="daterange"
            format="yyyyMMdd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['000000', '235959']"
          />
        </el-form-item>
        <el-row>
          <el-col :span="14" />
          <el-col :span="10">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
              <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
                新增
              </el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="dataListLoading"
      element-loading-text="拼命加载中"
      size="mini"
      border
      :data="dataList"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="id"
      />
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="姓名"
      />
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="描述"
      />
      <el-table-column
        prop="salary"
        header-align="center"
        align="center"
        label="薪水"
      />
      <el-table-column
        prop="birthday"
        header-align="center"
        align="center"
        label="生日"
      />
      <el-table-column
        prop="createtime"
        header-align="center"
        align="center"
        label="创建时间"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total>0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.limit" @pagination="search" />

    <el-dialog v-el-drag-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogVisible" center @dragDialog="handleDrag">
      <el-form ref="dataForm" :model="tempData" :rules="dataFormRules" :disabled="dialogStatus === 'view'" label-position="left" label-width="70px">
        <el-form-item label="ID" prop="id">
          <el-input v-model="tempData.id" type="text" placeholder="姓名" maxlength="10" readonly />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="tempData.name" type="text" placeholder="姓名" maxlength="10" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="tempData.remark" type="text" placeholder="描述" maxlength="20" />
        </el-form-item>
        <el-form-item label="薪水" prop="salary">
          <el-input-number v-model="tempData.salary" :precision="2" :min="0" />
        </el-form-item>
        <el-form-item label="隐藏列" prop="secInfo">
          <el-input v-model="tempData.secInfo" type="text" placeholder="描述" maxlength="20" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <!-- <el-input v-model="tempData.birthday" type="text" /> -->
          <el-date-picker
            v-model="tempData.birthday"
            type="date"
            format="yyyyMMdd"
            placeholder="日期"
            value-format="yyyyMMdd"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="createtime">
          <el-date-picker
            v-model="tempData.createtime"
            type="datetime"
            format="yyyyMMdd hh:mm:ss"
            placeholder="创建日期"
            value-format="yyyyMMdd hh:mm:ss"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-show="dialogStatus === 'update'" type="primary" @click="confirmUpdate">确 定</el-button>
        <el-button v-show="dialogStatus === 'update'" type="primary" @click="confirmDelete">删 除</el-button>
        <el-button v-show="dialogStatus === 'create'" type="primary" @click="confirmCreate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { fetchPagedData, createData, updateData, deleteData } from '@/api/userinfotest'
import { Message } from 'element-ui'

export default {
  components: { Pagination }, // 分页插件
  directives: { elDragDialog }, // dialog拖拽
  data() {
    return {
      dataListLoading: false, // 查询时数据加载中
      dataList: [], // 查询结果
      total: 0, // 查询总条数
      searchForm: {// 查询条件，查询表头+分页查询条件
        page: 1,
        limit: 20,
        sort: '', // 三个分页属性
        id: '',
        name: '',
        remark: '',
        salary: '',
        birthday: '',
        birthdayRange: [], // 生日查询范围
        createtime: '',
        createtimeRange: [] // 创建时间查询范围
      },
      dialogVisible: false, // 数据窗口是否打开
      tempData: {// 新增或者修改的数据
        id: undefined,
        name: '',
        remark: '',
        salary: '',
        birthday: '',
        createtime: ''
      },
      dialogStatus: '', // 数据框状态-修改、新增
      titleMap: {// 数据框标题
        view: '查看数据',
        update: '修改数据',
        create: '新增数据'
      },
      dataFormRules: {// 添加数据时的检查规则
        name: [
          { required: true, message: '必填数据', trigger: 'change' },
          { max: 10, message: '超过最大长度', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '必填数据', trigger: 'change' }
        ],
        createtime: [
          { required: true, message: '必填数据', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '必填数据', trigger: 'change' }
        ],
        salary: [
          { required: true, message: '必填数据', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    search() { // 查询数据方法
      this.dataListLoading = true
      fetchPagedData(this.searchForm).then(response => {
        this.dataList = response
        this.total = this.searchForm.limit * 5

        this.dataListLoading = false
      })
    },
    resetTemp() {
      this.tempData = {
        id: undefined,
        name: '',
        remark: '',
        salary: '',
        birthday: '',
        createtime: ''
      }
    },
    handleCreate() { // 点击新增按钮方法
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    confirmCreate() { // 创建数据方法
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确认添加数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            createData(this.searchForm).then(response => {
              this.dialogVisible = false
              Message.success('数据新增成功')
            })
          }).catch(() => {
            console.info('已取消')
          })
        }
      })
    },
    handleEdit(row) { // 点击修改数据
      this.tempData = Object.assign({}, row) // 复制对象，不进行双向绑定。
      this.dialogStatus = 'update'
      this.dialogVisible = true

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    confirmUpdate() { // 修改数据方法
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确认修改数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            updateData(this.searchForm).then(response => {
              Message.success('数据修改成功')
              this.dialogVisible = false
              this.search()
            })
          }).catch(() => {
            console.info('已取消')
          })
        }
      })
    },
    confirmDelete() { // 修改数据方法 ID主键设为readonly，删除时就不需要校验了。
      this.$confirm('确认修改数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        deleteData(this.searchForm).then(response => {
          Message.success('数据修改成功')
          this.dialogVisible = false
          this.search()
        })
      }).catch(() => {
        console.info('已取消')
      })
    },
    handleView(row) { // 点击查看数据
      this.tempData = Object.assign({}, row) // 复制对象，不进行双向绑定。
      this.dialogStatus = 'view'
      this.dialogVisible = true

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDrag() { // dialog拖拽事件
    }
  }
}
</script>

<style>

</style>
